// pages/account/account.js
import * as echarts from '../../ec-canvas/echarts';
const app = getApp();
//初始化图表
function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    series: [{
      data: [],
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  // onShareAppMessage: function (res) {
  //   return {
  //     title: 'ECharts 可以在微信小程序中使用啦！',
  //     path: '/pages/account/account',
  //     success: function () {},
  //     fail: function () {}
  //   }
  // },
  data: {
    scrollTop: 0,
    ec: {
      onInit: initChart
    },
    list: [],
    byGrouplist:[],
    winWidth: 0,
    winHeight: 0,
    currentTab: 0,
    uId:0,
    sum_money:0
  },
  click: function (e) {
    console.log("按了：", e.currentTarget.id)
  },
  onLoad: function (options) {
    this.setData({
      uId:app.globalData.uId
    })
  },
  onShow: function () {
    var that = this;
    wx.request({
      url: 'http://localhost:8080/superadmin/personalaccountbycategory',
      method: 'GET',
      data: {
        uId:that.data.uId,
      },
      success: function (res) {
        var list = res.data.personalAccountByCategoryList;
        if (list == null) {
          var toastText = '获取数据失败' + res.data.errMsg;
          wx.showToast({
            title: toastText,
            icon: '',
            duration: 2000
          });
          console.log("个人种类账单获取失败");
        } else {
          var len=list.length;
          var dataList=[];
          var sum=0;
          for(var i=0;i<len;i++){
            sum+=list[i].money;
            dataList.push({
              value:list[i].money.toFixed(2),
              name:list[i].category,
            });
            list[i].money = list[i].money.toFixed(2);
          }
          that.echartsComponnet = that.selectComponent('#mychart');
          sum=sum.toFixed(2);
          initGraph(that,dataList,that.echartsComponnet,sum);
          that.setData({
            list: list,
            sum_money:sum
          })
          console.log("个人种类账单获取成功")
        };
      },
    })
    wx.request({
      url: 'http://localhost:8080/superadmin/listpersonalgroupaccountlist',
      method:'GET',
      data:{
        uId: that.data.uId,
      },
      success:function(res){
        var list=res.data.userGroupAccountList;
        if(list){
          var len=list.length;
          var dataList=[];
          var sum=0;
          for(var i=0;i<len;i++){
            sum+=list[i].personalGroupAccountList[0].money,
            dataList.push({
              name:list[i].gName,
              value:list[i].personalGroupAccountList[0].money.toFixed(2),
            });
            list[i].personalGroupAccountList[0].money = list[i].personalGroupAccountList[0].money.toFixed(2);
          }
          that.echartsComponnet = that.selectComponent('#mychart2');
          sum=sum.toFixed(2);
          initGraph(that,dataList,that.echartsComponnet,sum);
          that.setData({
            byGrouplist:list,
            sum_money:sum
         })
         console.log("个人群组账单获取成功");
        }else{
          console.log("个人群组账单获取失败");
        }
      }
    })
  },
  onReady: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (result) {
        that.setData({
          winWidth: result.windowWidth,
          winHeight: result.windowHeight
        });
      },
    });
  },
  //切换滑块tab
  bindChange: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //点击tab切换
  swichNav: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
});
//加载饼状图
function initGraph(that,dataList,echart,total){
    var option = {
      title: {
        text: [
            '{value|￥' + total + '}',
            '{name|总金额}',
        ].join('\n'),
        rich: {
            value: {
                color: '#303133',
                fontSize: 18,
                fontWeight: 'bold',
                lineHeight: 20,
            },
            name: {
                color: '#909399',
                lineHeight: 10
            },
        },
        top: 'center',
        left: '153',
        textAlign: 'center',
        textStyle: {
            rich: {
                value: {
                    color: '#303133',
                    fontSize: 14,
                    fontWeight: 'bold',
                    lineHeight: 40,
                },
                name: {
                    color: '#909399',
                    lineHeight: 5
                },
            },
        },
    },
      backgroundColor: "#ffffff",
      series: [{
        data:dataList,
        label: {
          normal: {
            fontSize: 12,
            show: true,
            formatter: '{b}\n({d}%)'
          }
        },
        type: 'pie',
        center: ['50%', '50%'],
        radius: ['25%', '40%'],
      }]
    };
    // that.echartsComponnet = that.selectComponent('#mychart2');
    echart.init((canvas, width, height) => {
      // 初始化图表
      const Chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      Chart.setOption(option);
    })
  }